/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="dataset-detail-page">
        <div class="dataset-detail__title">
            <div class="title-left"> 基本信息</div>
            <div class="title-right">
                <sf-button-primary :default-disabled="source === 'shared'" @click="shareDataset">分享</sf-button-primary>
                <sf-button @click="_deleteDataset">删除</sf-button>
            </div>
        </div>
        <div class="dataset-detail__content">
            <div class="detail-content__item">
                <div class="detail-item__label">数据集名称</div>
                <div class="detail-item__value">{{ data.dataset }}</div>
            </div>
            <div class="detail-content__item">
                <div class="detail-item__label">描述</div>
                <div class="detail-item__value">
                    <sf-editor v-model="description" :italic="false" @hide="changeDescription"/>
                </div>
            </div>
            <div class="detail-content__item">
                <div class="detail-item__label">存储数据空间</div>
                <div class="detail-item__value">{{ data.dataspace }}</div>
            </div>
            <div class="detail-content__item">
                <div class="detail-item__label">创建时间</div>
                <div class="detail-item__value">{{ data.createTime }}</div>
            </div>
            <div class="detail-content__item">
                <div class="detail-item__label">修改时间</div>
                <div class="detail-item__value">{{ data.updateTime }}</div>
            </div>
            <div class="detail-content__item">
                <div class="detail-item__label">数据集大小</div>
                <div class="detail-item__value">{{ data.size === 0 ? 1 : data.size }}M</div>
            </div>
            <div class="detail-content__item">
                <div class="detail-item__label">数据集拥有人</div>
                <div class="detail-item__value">{{ data.owner }}</div>
            </div>
            <div class="detail-content__item">
                <div class="detail-item__label">列数</div>
                <div class="detail-item__value">{{ (columns || []).length }}</div>
            </div>
            <div class="detail-content__item">
                <div class="detail-item__label">文件数量</div>
                <div class="detail-item__value">{{ (tablesInfo || []).length + (filesInfo || []).length }}</div>
            </div>
            <div class="detail-content__item">
                <div class="detail-item__label">标签</div>
                <div class="detail-item__value">
                    <el-tag
                        v-for="tag in tag"
                        :key="tag"
                        closable
                        size="mini"
                        type="info"
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                        {{ tag }}
                    </el-tag>
                    <el-input
                        v-if="inputVisible"
                        ref="saveTagInput"
                        v-model="inputValue"
                        class="input-new-tag"
                        size="mini"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                    >
                    </el-input>
                    <el-button v-else class="button-new-tag" size="mini" @click="showInput">
                        <i class="el-icon-plus"/>
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {debounce} from 'src/util/delay';
import ShareModal from "../../project_index/resource/my_dataset/components/share_modal";
import store from 'src/vuex/store';


let userID = store.state.userId;

export default {
    props: {
        data: {
            type: Object,
            default: () => ({})
        },
        columns: {
            type: Array,
            default: () => ([])
        },
        tablesInfo: {
            type: Array,
            default: () => ([])
        },
        filesInfo: {
            type: Array,
            default: () => ([])
        },
        source: String,
    },
    data() {
        return {
            description: '',
            tag: [],
            inputVisible: false,
            inputValue: ''
        }
    },
    created() {
        this.commitChange = debounce(this.commitChange, 500)
        
    },
    watch: {
        data: {
            handler() {
                this.description = this.data?.description ? this.data.description : '';
                this.tag = this.data?.label === '' ? [] : this.data?.label?.split(';')
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        async commitChange() {
            const params = {
                label: this.tag.join(';'),
                description: this.description,
            }
            let jsonData = await this.$ajax.put(`/ai-datalake/api/v2/dataspaces/${this.data.dataspace}/datasets/${this.data.dataset}`, params);
            const {success, msg} = jsonData;
            if (!success) {
                this.$showErr(msg);
                this.$emit('update')
            }
        },
        handleClose(tag) {
            this.tag.splice(this.tag.indexOf(tag), 1);
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick().then(() => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.tag.push(inputValue);
                this.commitChange()
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        changeDescription() {
            this.commitChange()
        },
        _deleteDataset() {
            this.$confirm({
                title: _('删除数据集'),
                subTitle: _('确认要删除“{0}”吗？', this.data.dataset),
                msg: _('删除后数据集将无法恢复。'),
                autoClose: true,
                submitLoading: true,
                callback: async actionName => {
                    if (actionName === 'submit') {
                        this.$mask();
                        const jsonData = await this.$ajax.delete(`/ai-datalake/api/v1/dataspaces/${this.data.dataspace}/datasets/${this.data.dataset}`);
                        this.$unmask();
                        let {success, msg} = jsonData;
                        if (!success) {
                            return this.$showErr(msg || _('删除失败'));
                        }
                        this.$ok(_('删除成功'));
                        this.$emit('on-return')
                    }
                }
            });
        },
        
        async shareDataset() {
            const jsonData = await this.$ajax.get(`/ai-datalake/api/v1/shared-datasets`, {
                username: userID,  // 用户名
                dataspace: this.data.dataspace, // 数据空间名称
                dataset: this.data.dataset,  // 数据集名称
                resourceType: "dataset"
            });
            let {success, msg, data} = jsonData;
            if (!success) {
                this.$showErr(msg);
                return;
            }
            this.$modal(ShareModal, {
                title: _('分享数据集'),
                autoDestroy: true,
                width: 560,
                // height: 516,
                buttons: [
                    // {
                    //     cls: 'sfv-btn-primary',
                    //     text: _('确认'),
                    //     actionName: 'submit'
                    // },
                    {
                        cls: 'sfv-btn',
                        text: _('关闭'),
                        actionName: 'cancel'
                    }
                ],
            }).open({
                data: {
                    data: data,
                    username: userID,  // 用户名
                    dataspace: this.data.dataspace, // 数据空间名称
                    dataset: this.data.dataset  // 数据集名称
                }
            })
            
            
        }
    }
}
</script>

<style lang="less" scoped>
.dataset-detail-page {
    
    .dataset-detail {
        &__title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .title-left {
                height: 24px;
                line-height: 24px;
                border-left: 6px solid #1770E6;
                padding-left: 8px;
                font-size: 16px;
                font-weight: 500;
                color: #000000;
            }
        }
        
        &__content {
            .detail-content__item {
                display: flex;
                margin-top: 16px;
                height: 22px;
                
                .detail-item__label {
                    width: 84px;
                    margin-right: 36px;
                    font-size: 14px;
                    font-weight: 600;
                    line-height: 22px;
                    color: #86909C;
                }
                
                .detail-item__value {
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 22px;
                    color: #1D2129;
                    
                    /deep/ .sfv-editor {
                        height: 22px;
                        
                        .sfv-editor_tip-box {
                            line-height: 22px !important;
                            
                            .sfv-editor_tip {
                                padding-left: 0 !important;
                            }
                        }
                        
                        .sfv-editor_input-box {
                            .sfv-textfield {
                                height: 22px !important;
                            }
                        }
                    }
                    
                    .el-tag + .el-tag {
                        margin-left: 10px;
                    }
                    
                    .el-tag {
                        border-radius: 12px;
                        background: #FFFFFF;
                        border: 1px solid #CCCFD9;
                        
                        & + .input-new-tag {
                            margin-left: 10px;
                        }
                        
                        & + .button-new-tag {
                            margin-left: 10px;
                        }
                    }
                    
                    .input-new-tag {
                        height: 24px;
                        width: 90px;
                        
                        /deep/ .el-input__inner {
                            height: 24px;
                            line-height: 24px;
                        }
                        
                    }
                    
                    .button-new-tag {
                        padding: 0;
                        width: 40px;
                        height: 24px;
                        border-radius: 12px;
                        background: #FFFFFF;
                        border: 1px dashed #DDDDDD;
                    }
                }
            }
        }
    }
}
</style>
